<template>
    <div
        class="address-box"
        @click="selectAddress"
    >
        <img
            class="address-icon"
            src="@/assets/images/orderConfirm/address.png"
        />
        <div class="address-info">
            <div class="address-name-phone"  v-if="addressInfo != ''">{{addressInfo.name}}&nbsp;&nbsp;&nbsp;&nbsp;{{addressInfo.phone}}</div>
            <div class="address-detail"  v-if="addressInfo != ''">{{addressInfo.region_txt}}{{addressInfo.detail}}</div>
            <div class="address-tips" v-else>请选择收货地址</div>
        </div>
        <img
            class="more-icon"
            src="@/assets/images/orderConfirm/more.png"
        />
    </div>
</template>

<script>
export default {
    name: 'MyAddress',
    props: ['addressInfo'],
    methods: {
        selectAddress () {
            this.$emit('selectAddress')
        }
    }
}
</script>

<style lang="stylus" scoped>
.address-box
    display flex
    align-items center
    padding 0.33rem
    background-image url('../../../assets/images/orderConfirm/address-line.png')
    background-repeat no-repeat
    background-size 100%
    background-position bottom
    background-color #fff
    .address-icon
        width 0.37rem
        height 0.46rem
    .more-icon
        width 0.2rem
        height 0.28rem
    .address-info
        flex 1
        min-width 1px
        padding 0 0.37rem
        .address-name-phone
            font-size 0.33rem
            color #333
        .address-detail
            font-size 0.33rem
            color #666
            margin-top 0.22rem
            line-height 1.3
</style>

